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REQ | RES 


Test your front-end against a real API 


Fake data Real responses Always-on 


A hosted REST-API ready to respond to your AJAX requests. 


Give it a try 


00:11 @ 
IN Kea Et ISIS mg” 1 


Menjelaskan http reguset untuk menghubungkan dgn api 
Dgn ini api sudah disediakan diwebsite reg res 
Disini sudah punya api 

Dia database nya bohong2 an 

Sudah macem2 apinya 

Mau kirim id nomor 2 dia static 

Seolah punya databse 

Kita bisa create sebenar nya bohong2 

Api ini akan kita pakai api ini sendiri 

Method2 ada banyak ada get post put delete 
Yg sering digunakan get dan post saja 
Pertama kali kita buat method post ini 


& 39.[ENG SUB] FLUTTER 36. HTTP Request Koneksi ke API (Post Method) - Flutter Indonesia.mp4 - VLC media player =æ x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


o + o 


O meneretose 9 


01:53 —— 22:06 


NI rap a Fs 0 1 
Disni ada paramter yg diperlukan 
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02:04 —— 22:06 


|] ella DR SSA MP | 
Nan diakan merespon seperti ini ada name dannjob 
Seperti biasa buat stf widget 
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extends St 
ride 
build(E 
returr 
home: 
appBar: Ar 
body: Ce 
child: lumn( 
mainAxisAlignment : 
children: «W 


(title: 


onPressed: () (), 
child: Text( | 


D/EGL emulation( 6913): eglMak 
6913): 
3372036854775807, 


=3609048497300, 


Current: 
I/OpenGLRenderer( Dav 
estInputEvent-92 
6400, 


1494 


Newe 
PerformTraversalsStart 


IssueDrawCommandsStart-36 


03:34 
|] tka mm 


ct Sis 
Lalu diatas button in pasang text 
Untuk menapilkan hasil pengembalian tadi 
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home: 
appBar: 
body: Ce er( 
child: Column( 
mainAxisAlignment : 
children: 


onPressed: () 4), 
child: xt( T 


6913): eglMakeCurrent: 


erer( 6913): 


mulation( 
I/OpenGLRen Davey! 
72036854775807, 


sStart-3689848497308, 


estInputEvent-9223 


6490, PerformTraver 


PS 1494600, I 


ueDrawCommandsStart-3609072 


03:59 
|] kampul DI 


Jalankan 
Nanti saperti ini 


0xe8c60ac8: 
duration-1084ms ; 
tInputEvent-@, HandleInputStart-3609042349100 


9072269500, 


0xe8c60ac@: 
duration-1984ms, 


NewestInputEvent 


69500, 


t.spaceEvenly, 


» 


ver (tinfo @xd2e8cf80) 


Flags-1, IntendedVsyn 5424577, Vsync- 


DrawStart-3609966746589, SyncQueued=3609068109100, 
9126087000 


wapBuffe 00, FrameCompletec 


»), 


t.spaceEvenly, 


) 


, 


appasvasivn may ve 6 uu mus 
3 1 (tinfo @xd2e8cf80) 
IntendedVsync-3608355 
360904 


ver 
Flags=1, 24577, 
@, HandleInputStart 349160, 
DrawStart-36090866746588, SyncQueued=3609068109100, 


SwapBuffers=3609126087000, 


AnimationStart 


Vsync=36090. 


FrameCompleted=3609442848800, 


387578: 
360904272 
SyncStart=360907 


Dequeue 


8757883 Jld 


AnimationStart 


SyncStart=360907 


Dequeue 


22:06 
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build( context) (1 AN 
t 
home: 
appBar: 
body: 
child: 
mainAxisAlignment: .spaceEvenly, 
children: « >[ 
( 
( 
onPressed: () {}, 
child: 


at android.hardware.radio.VI bs as Parce 


java vm ext.cc:542) at android.hardware.radio.V1 2-TKdutokesponsepstuo-ortFansact( IR 


04:06 


1 rem lw sk oai 
Ketika klik post maka diakan mengirimkan data ke api tadi req res 

Dan diakan mengemblikan data nya 

Seperti id nya nanti akan ditampil disni 

Untuk menghubungkan aplikasi kita pada api kita buat setidak nya 3 hal 
Pertma buat class sebagai model 

Kedua method untuk maping json object ke class yg kita buat 

Dan method untuk memangil api nya 

Buat file nya nya 

Sebelumnya di puspec yml 

Gunkan package http 
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0.12.0+2 


flutter 


F/m.android.phon(16435): runti | native: #15 pc 000d3bdb /system/lib/libart.so (art::(anonymous name 
spa ScopedCh Check (art: : ScopedObjectAcc , bool, char const", art::(anonymous namespace niValueTyp 
et)4811) 

F/m.android.phon(16435): runtime.cc:558) native: #16 pc 000c8856 /system/lib/libart.so ( : (anonymous name 


v space): :CheckJNI: :NewStringUTF( JNIEnv", char const*)+902) 


NI dam Tw SEX M- i 
Kasih nama package ini biar gampang pangil nya 
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Audio 


post result modeldart © 


D om Fumer 


[api_demo] flutter packages get 
Running "flutter pub get" in api_demo. 
exit code @ 


T Waw a EER o Lg 
Lalu kasih nama class 

Lalu buat data2 nya 

Sesuai dgn isi yg dipangil 

Maka ada 4 
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E - 0 


© Type here tose o = 


m e ci (sisix m- i 
Kita buat4 seharus nya tidak perlu 4 butuh name saja bole 

Tapi data yg disediakn Cuma 4 

Disini bisa beda create asli nya createAt 

Lalu buat constructor nya 

Dimananya nanti yg dimasukan paramter ke dalam id filde ini secara otomatis 
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id; 
name; 
job; 
created; 


(4 sid, .job, .created)): 


(api demo) flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


i daa HW [SISIA o a 
Lalu dibawah nya factory method fungsi nya buat untuk post method 

Dia maping json object 

Tipe nya mapsstring, dynamic> disni nama paramter nya disni namanya object 
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name; 
job; 
created; 


({ .id, .name, “job, .created)): 


.createPostResult ( « 5 object) 


(api demo) flutter packages get 
Running "flutter pub get" in api demo... 
exit code @ 


I ah DU SISIP M i 
Disni lihat kembalian web service nya 
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o z o 


O pener tose 9 


09:27 


|| kempul Ciu SISIA mp” i 
Dini ada key dan ada value nya 

Map itu ada data depan nya baru ada nilai nya 

Maka disini kita return post result yg baru 

Lalu isi diambil dari object dgn key yg id 

Name juga key name 

Create key createAt berbeda 
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port resut modeldan © 
job; 
created; 


.name, “job, .created)), 


.createPostResult ( « £ > object) 
{ 
returr ( 
id: object['id'], 
name: object['name'], 
job: object['job'], 
created: object['createdAt'] 
); 
} 
} 


[api_demo] flutter packages get 


Running "flutter pub get" in api_demo... 
exit code 9 


H FEE Calti SSZ mp” i 
Sekarang buat yg 3 yaitu method menghubungkan aplikasi ke api 

Ini sduah buat 2 

Class data datanya buat factory method sekarang buat api menghungkan apinya 
String futurexPostResult- namanya connectAPi( disni butuh data) name dan job 
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© o O ce e n D a o 


O Tere 19 sen 9 


1) apa cam (sisix "aa 
Maka disni buat string name dan job 

Untuk menghungkan api kita butuh url nya 

Kita buat dulu 

String apiUrl = “”lalu disi url 


Sekarang panggil http nya 

http.post (apu url, disni ada body ) 

body kumpulan name dan job maka disni juga sama 
“name” ambil dari sesuai name 

http post yaitu async dia kemblikan future maka ditambahakn async 
dan kemudian tambkan await 

lalu hasil pengembalian ditampung var apiResult 
apiResult belum tampak bentuk json 

untuk dapatnya 

maka var jsonObject =json; 

json itu di import dart:convert 
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modeldan © 
name: object| If 
job: object[ is 
created: object[ 


< > connectToAPI( 
apiURL = 


http.post(apiURL, body: { : name, 
json; 


[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 
exit code @ 


> ana Gu ASP MEP | 
Maka json.decode 

Kita decode apiresult tadi .body 

Kalau sudah ubah decode object 

Baru return nya adalah postresult lalu bikin createPostResulut butuh object nya 
adalah jsonObject 
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object['j || 
created: object['creat D; 


« > connectToAPI( job) async 4 
apiURL - "ht regres.i pi/us 


apiResult = await http.post(apiURL, body: ("name": name, "job": job)); 
jsonObject = json.decode(apiResult.body), 


return .createPostResult(jsonObject), 


(api demo) flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


T Kemal Si Sisi «0 
Sudah beres kembali ke main dart 


Di main dart buat satu buah fild namanya postResult sama dgn null masih kosong 
Lalu import 
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createState() => 


postResult = 


build( context) { 
returr 
home: 
appBar: (title: ("API Demo"),), 
body: 
child: ( 
mainAxisAlignment: .spaceEvenly, 
children: « >[ 
("Hasil Kembalian"), 


( 


[api_demo] flutter packages get 


Running "flutter pub get" in api demo... 
exit code 9 


= ml IU SS 4 Be | 
Disni lalu tampilkan hasilnya 

postResul kalau tidak null maka dia menampilkan postResult.id + dll “| ” ini untuk 
pemisah 

titik dua kalau null : maka menampilkan apa tidak ada data 
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», 
body: 
child: ( 
mainAxisAlignment: .spaceEvenly, 
children: « >[ 
((postResult != 
? postResult.id + 
Pi 
postResult.name + 
ig: 
postResult.job + 
2 Je 
postResult.created 
"Tidak ada da Js 
( 
onPressed: () {}, 
child: ("POST"), 
) 
L 


[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


18:27 
Ii reda Tin Sisik mM i 
Awal nya gini 
39.[ENG SUB] FLUTTER 36. HTTP Request _ Koneksi ke API (Post Method) - Flutter Indonesia.mp4 - VLC media player Pa x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


title: ("API Demo"), 
», 
body: 
child: ( 
mainAxisAlignment : .spaceEvenly, 
children: « >[ 
((postResult != 
? postResult.id + 


0. 


API Demo 


t 
postResult.name + 
a 
postResult.job 4 
s Lk 
postResult.created 
"Tidak ada data"), 
( 
onPressed: () (), 
child: ("POST"), 


` 


[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


II Jaa Gu ASP mg” | 
Kalau kita klik dia minta mau nya seperti itu 

Kita stop dahulu 

Lalu di onpressed kita pangil postresult.connectApi(“”) isi nya mau apa 

Then maksud nya apa 

Itu connect api itu async akan mengbungan server 


Lalu ke server kemblaikan json object di maping dan akan menjadi PostREsult jadi 
then ini perlu 
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+ 
postResult.name + 
+ 
postResult.job + 
+ 
postResult.created 
: » 
iButton( 
onPressed: () ( 
tResi .connectTOAPI ( ).then((value) ( 
1): 
b 


child: 


[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


T ajal Tin Sea -Sai 
Sekarang disni tambhkan value ini tambkan postResulut ini yg null 
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postResult = null; 


t build(Bu ext context) { 
returr 
home: < 
appBar: 
title: 
», 
body: Cc rt 
child: lumn( 
mainAxisAlignment: MainAxisAlignme .spaceEvenly, 
children: «Widget»| 
ext( (nostResult !- ni ) 


[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 


exit code 9 


20:18 22:06 


Maka hasil pengambilakna dipasang disini lalu di update setstate 
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4 
postResult.name + 
: 4 
postResult.job # 
p "4 
postResult.created 
"Tidak ada data"), 
( 
onPressed: () { 
.connectToAPI("Badu", "Dokter").then( (value) ( 
postResult = value; 
setState(() {}); 


If 
) 
[api_demo] flutter packages get 
Running "flutter pub get" in api demo... 
exit code 9 


20:49 


Maka sudah ada maka kita klik post 
Maka sudah dapat 
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+ 
postResult.name + 
a "4 
postResult.job # s0. 
EN API Demo 
postResult.created 
"Tidak ada data"), 
( 
onPressed: () 4 
.connectToAPI("Badu", "Dokter”).tI 
postResult = value; 
setState(() {}); 
D; 
b 
("POST"), 


l, 
» 


(api demo) flutter packages get 
Running "flutter pub get" in api demo. 
exit code 9 


U ah AU FOR o a 
Idnya namanya badu waknya beda diserver sana bukan punya kita 


